<template>
    <div >
        <Header class="head">
            <li slot="top" class="icon-cuo11"> <span class="iconfont icon-cuo1" @click="jump_list()"></span></li>
            <li slot="top" class="url1"><span class="url"></span>{{url}}</li>
            <li slot="top" class="icon-yuedu1"><span class="iconfont icon-yuedu"></span></li>
            <li slot="top" class="icon-gengduo1"><span class="iconfont icon-gengduo"></span></li>
      </Header>
        <!-- {{this.$route.query.id}} -->
        <section class="content">
            <h1>{{this.$route.query.det_info.list_title}}</h1>
            <div class="logo">
                <img src="images/logo_09.jpg">
                <p>one文艺生活</p>
                <span>{{this.$route.query.det_info.date}}</span>
            </div>
        <!-- 
        <div class="text">
            <h6>
                Lorem Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque quod exercitationem vel odio esse, natus autem nemo obcaecati, dicta quae facilis quis? Animi, ad. Impedit ut dignissimos quo suscipit eaque.lor lorem*50 Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi numquam aliquid rem, facilis deleniti cum odio officiis nobis. Nemo accusantium dolor in nostrum dignissimos autem tempore quidem temporibus. Consequatur, ab?
               
            </h6>
            <p>-《生活大爆炸》-</p>
            <b>[ 一言 ] APP </b>
        </div> -->
        <!-- 1 (1).jpg -->
<!-- 1 (2).jpg
1 (3).jpg
1 (4).jpg
1 (5).jpg
1 (6).jpg
1 (7).jpg
1 (8).jpg
1 (9).jpg
1 (10).jpg
1 (11).jpg
1 (12).jpg
1 (13).jpg
1 (14).jpg
1 (15).jpg
1 (16).jpg
1 (17).jpg
1 (18).jpg
1 (19).jpg -->

        </section>
        <img :src="this.$route.query.det_info.details_img" class="det_img">
        <footer class=content>
            <Yuedu></Yuedu>
            <p>轻芒在未重新编辑原始内容的情况下对版式做了自动优化，以提升阅读体验</p>
            <strong>版权报错·版权举报</strong>
        </footer>
    </div>
</template>

<script>
import Header from "@/components/index_head.vue"
import Yuedu from "@/components/yuedu.vue"
export default {
    data(){
        return  {
            url:window.location.href,
            det:""
        }
    },
    components:{
        Header,
        Yuedu
    },
    methods:{
        jump_list(){
            this.$router.go(-1)
        }
    },
    mounted(){
        // let url = window.location.href
        // console.log(this.$route.query.det_info)
        // this.det=this.$route.query.detail[0]
        console.log(this.$route.query.det_info)

    }

}
</script>

<style lang="scss" scoped>
.head{
    display: flex;
    // justify-content: space-between;
    .iconfont{
        font-size: .18rem;
        margin: 0 .13rem;
    }
    .icon-cuo11, .icon-yuedu1 ,.icon-gengduo1{
        margin-top: .03rem;
        display: block;
        flex: 1
    }
    .url1{
        display:block;
        height: .22rem;
        line-height: .22rem;
        box-sizing: border-box;
        padding: 0 .08rem;
        background:#e3e3e3;
        flex:35;
        margin: 0 .15rem;
        border-radius: .1rem;
        overflow: hidden;
        
    }
}
.content{
    box-sizing: border-box;
    padding: 0 .14rem;
   
}
section{
    h1{
        font-size: .22rem;
        margin:.15rem 0;

    }
    
}

.logo{
    margin-bottom: .3rem;
    img{
        width: .2rem;
        height: .2rem;
        float: left;
    }
    p{
        font-size: .12rem;
        line-height:.2rem;
        float: left;
        margin: 0 .05rem;
    }
    span{
        color: #787876;
         line-height:.2rem;
    }
}
section>img{
    width:100%;
}
.text{
    margin: .6rem 0 0 0 ;
    text-align: center;
    color: #787878;
    h6{
        width: 2.3rem;
        font-size: .12rem;
        line-height: .22rem;
        margin: 0 0 .34rem 0;
        margin: 0 auto .34rem ;

    }
    p{
        color: #363636;
    }
    b{
        font-size: .1rem;
        display:block;
        color:#7c7c7c;
        text-align: right;
        margin-top: .25rem;

    }
}

footer{
    overflow: hidden;
}
footer>p{
    margin: .57rem 0 .1rem 0;
    font-size: .1rem;
    color: #787878;
}
strong{
    display: inline-block;
    font-size: .1rem;
    color:#313131;
    padding-bottom: .2rem;
}
.det_img{
    width: 100%;
    }
</style>


